<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
          margin: 0px;
        }
      
        .div1 {
          position: absolute;
          width: 200px;
          height: 200px;
          top: 50px;
          left: 10px;
          background: red;
        }
    </style>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script></head>
    <script type="text/javascript">
        /*
        需求：
        1.点击btn1，向上滑动
        2.点击btn2，向下滑动
        3.点击btn3，向上/向下切换
        */
        $(function(){
            var $div_div1=$("div.div1");
            //1.点击btn1，向上滑动
            var $button_btn1=$(":button#btn1");
            $button_btn1.click(function(){
                $div_div1.slideUp(1000);
            })

            //2.点击btn2，向下滑动
            var $button_btn2=$(":button#btn2");
            $button_btn2.click(function(){
                $div_div1.slideDown(1000);
            })

            //3.点击btn3，向上/向下切换
            var $button_btn3=$(":button#btn3");
            $button_btn3.click(function(){
                $div_div1.slideToggle(1000);
            })
        })
    </script>
<body>
    <button id="btn1">慢慢收缩</button>
    <button id="btn2">慢慢展开</button>
    <button id="btn3">收缩/展开切换</button>

    <div class="div1"></div>
    <!--
        滑动动画
        1. slideDown(): 带动画的展开
        2. slideUp(): 带动画的收缩
        3. slideToggle(): 带动画的切换展开/收缩
    -->
</body>
</html>